<template>
  <div class="fullMain">
    <!--插入验证提示框-->
    <div v-transfer-dom>
      <alert v-model="isShowAlert">{{ alertText }}</alert>
    </div>
    <div class="contentAll">
      <!-- 任务列表 -->
      <divider>项目标签</divider>
      <div v-for="(item, index) in projectTag" :key="index" class="tag_box">
        <group class="taskWrap">
          <card :header="{ title: item.title }" :style="changeBgc(index)">
          </card>
        </group>
      </div>
      <divider>个人标签</divider>
      <div v-for="item in userTag" :key="item.index">
        <group class="taskWrap">
          <card :header="{ title: item.name }" style="text-align: left">
            <div slot="content" class="cardContent">
              <div class="taskStatusWrap">
                <div class="taskStatus" @click="tagFinish(item)">
                  <span style="color: #1abc9c"
                    ><i
                      class="fa fa-check-square fa-fw"
                      style="color: #1abc9c"
                    ></i
                    >完成</span
                  >
                </div>
                <div style="border-right: 1px solid #e5e5e5"></div>
                <div class="taskStatus" @click="tagDelete(item)">
                  <span style="color: #e54363"
                    ><i
                      class="fa fa-minus-square fa-fw"
                      style="color: #e54363"
                    ></i
                    >删除</span
                  >
                </div>
              </div>
            </div>
          </card>
        </group>
      </div>
    </div>
    <div class="editButton" @click="isShowCreateTag=!isShowCreateTag">
      <span>
        <img src="~static/img/report/add.png" height="30" width="30" alt />
      </span>
    </div>
    <!-- 新建标签的弹窗 -->
    <div v-transfer-dom>
      <confirm
        v-model="isShowCreateTag"
        ref="confirm"
        show-input
        title="新建标签"
        @on-confirm="postCreateNewTag"
      ></confirm>
    </div>
  </div>
</template>

<script>
import { Card, Divider, Group, XHeader,Confirm } from "vux";
import { mapState } from "Vuex";
import tags from "api/tag";

export default {
  name: "TaskManage",
  components: {
    XHeader,
    Card,
    Group,
    Divider,
    Confirm
  },
  data() {
    return {
      isShowAlert: false,
      alertText: "",
      projectTag: [],
      userTag: [],
      isOverview: true,
      chooseTag: "",
      showOptConfirm: false,
      colorList: [
        "rgba(252,157,154,0.2)",
        "rgba(249,205,173,0.2)",
        "rgba(131,175,155,0.2)",
      ],
      isShowCreateTag:false,
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
  },
  watch: {},
  mounted() {
    this.getAllTasks();
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    showAlert(alertText) {
      this.isShowAlert = true;
      this.alertText = alertText;
    },
    closeTip() {
      this.isShowAlert = false;
      this.alertText = "";
    },
    async getAllTasks() {
      const result = await tags.getAllTag();
      if (result.code === 1) {
        this.projectTag = result.data.projectTags;
        this.userTag = result.data.userTags;
      }
    },
    async tagFinish(item) {
      console.log(item.id);
      const result = await tags.getFinishTag(item.id)
      if (result.code === 1) {
        this.showAlert("已完成该标签！");
        setTimeout(() => {
          this.closeTip()
        }, 1000);
        await this.getAllTasks();
      } else {
        this.showAlert("请稍后再试");
      }
    },
    async tagDelete(item) {
      const result = await tags.getDeleteTag(item.id);
      if (result.code === 1) {
        this.showAlert("成功删除");
        await this.getAllTasks();
      } else {
        this.showAlert("删除失败，请稍后再试");
      }
    },
    changeBgc(id) {
      let colorIndex = id % this.colorList.length;
      return { "background-color": this.colorList[colorIndex] };
    },
    showCreateTagWin() {
      this.isShowCreateTag = true;
    },
    async postCreateNewTag() {
      let tagName = [];
      tagName.push(this.$refs.confirm.msg);
      const result = await tags.postCreateTag(tagName);
      if (result.code === 1) {
        this.showAlert("新建标签成功");
        this.getAllTasks();
        // await this.onShow();
      } else if (result.code === 0) {
        this.showAlert("新建标签失败，请稍后再试");
      }
    },
  },
};
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}

.fullMain {
  width: 100%;
  height: 100%;
  background-color: #ededed;
  z-index: 200;
}

.tag_box {
  display: inline-block;
  margin: 5px;
}

.taskWrap {
  // 负责人和成员的样式都是img和这个span
  box-shadow: 3px 3px 3px rgba(195, 195, 195, 0.8);
  // margin-top: 30px;
  .avatar {
    width: 30px;
    height: 30px;
    border-radius: 5px;
    margin-right: 5px;
  }
  .name {
    width: 30px;
    height: 30px;
    text-align: center;
    font-size: 10px;
    color: gray;
    margin-top: 4px;
  }
  .managersList {
    height: 45px;
    margin-left: 10px;
    display: flex;
    justify-content: space-between;
    .leaader {
      display: flex;
      .managerShow {
        display: flex;
        flex-direction: column;
      }
      .managerLogo {
        font-size: 12px;
        font-weight: bolder;
        color: #f99d4a;
        margin-left: 10px;
        line-height: 45px;
      }
    }
    .taskTotalStatus {
      margin-right: 10px;
      color: green;
      line-height: 45px;
    }
  }
  .cardContent {
    padding: 5px;
    ul {
      display: flex;
      justify-content: space-between;
      background-color: #f7f7f7;
      padding: 5px 10px;
      border-radius: 5px;
      height: 45px;
      .executorsList {
        display: flex;
        li {
          display: flex;
          flex-direction: column;
        }
      }
      .executorsListLength {
        line-height: 45px;
      }
    }
    .taskStatusWrap {
      display: flex;
      justify-content: space-around;
      line-height: 30px;
      padding: 5px 0;
      .taskStatus {
        display: flex;
        flex-direction: column;
        span {
          text-align: center;
        }
        .num {
          color: green;
          font-size: 16px;
          font-weight: bolder;
        }
      }
    }
  }
}
.editButton {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 7px;
  border-radius: 50%;
  background-color: green;
  width: 30px;
  height: 30px;
  span {
    img {
      width: 30px;
      height: 30px;
    }
  }
}
</style>
<style>
.weui-panel .weui-panel__hd {
  color: gray;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}
</style>
